<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_small'"
      :append-to-body="true"
      title="编辑订阅"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="closeDialog"
    >
      <el-form
        ref="formData"
        class="base-pipeline-layout system-user-form"
        label-width="100px"
        :model="formData"
        :rules="formDataRules"
        status-icon
      >
        <el-form-item
          label="消息类型"
          :label-width="formLabelWidth"
          prop="messageType"
          :error="errorMsg.messageType"
          style="width: 100%"
        >
          <el-select v-model="formData.messageType" width="150px">
            <el-option
              v-for="(item, index) in messageBusinessTypeList"
              :key="index.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="订阅者类型"
          :label-width="formLabelWidth"
          prop="subscribeType"
          :error="errorMsg.subscribeType"
          style="width: 100%"
        >
          <el-select
            v-model="formData.subscribeType"
            width="150px"
            @change="subscribeTypeChange"
          >
            <el-option
              v-for="(item, index) in subscribeTypeList"
              :key="index.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="formData.subscribeType == 20"
          label="订阅者"
          :label-width="formLabelWidth"
          prop="subscriberArray"
          :error="errorMsg.subscriberArray"
          style="width: 100%"
        >
          <el-select v-model="formData.subscriberArray" multiple width="150px">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="formData.subscribeType == 30"
          label="订阅者"
          :label-width="formLabelWidth"
          prop="subscriberArray"
          :error="errorMsg.subscriberArray"
          style="width: 100%"
        >
          <el-select v-model="formData.subscriberArray" multiple width="150px">
            <el-option
              v-for="item in userGroupList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="状态"
          :label-width="formLabelWidth"
          prop="status"
          :error="errorMsg.status"
          style="width: 100%"
        >
          <el-select v-model="formData.status" width="150px">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')"
          >保 存</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { update, get } from "../../../api/Message/MessageSubscribe.js";
import {getDictList} from "@/ModuleSystem/api/System/SystemDict.js";
import {getUserListNoPage} from "@/ModulePermission/api/Permission/PermissionUser.js";
import {getUserGroupList} from "@/ModulePermission/api/Permission/PermissionUserGroup.js";
export default {
  name: "MessageSubscribeEdit",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      formLabelWidth: "100px",
      messageBusinessTypeList: [],
      userList: [],
      userGroupList: [],
      subscribeTypeList: [
        {
          label: "全部",
          value: 10,
        },
        {
          label: "用户",
          value: 20,
        },
        {
          label: "用户组",
          value: 30,
        },
      ],
      statusList: [
        {
          label: "启用",
          value: 1,
        },
        {
          label: "禁用",
          value: 0,
        },
      ],
      formData: {
        messageType: "",
        messageTypeName: "",
        subscribeType: 10,
        subscriberArray: [],
        subscriberNameArray: [],
        subscriber: "",
        subscriberName: "",
        status: 1,
      },
      formDataRules: {
        messageType: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        subscribeType: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        subscriber: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        status: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        subscriberArray: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
      initErrorMsg: {
        messageTypeName: "",
        subscribeType: "",
        subscriber: "",
      },
      errorMsg: {
        messageTypeName: "",
        subscribeType: "",
        subscriber: "",
      },
    };
  },
  watch: {},
  created() {
    console.log(this.id);
    this.getMessageBusinessType();
    this.getUserList();
    this.getUserGroupList();
    this.get();
  },
  methods: {
    getMessageBusinessType() {
     getDictList({ dictCode: "MessageBusinessType" })
        .then((res) => {
          this.messageBusinessTypeList = res.data;
        });
    },
    // 获取用户
    getUserList() {
      getUserListNoPage()
        .then((res) => {
          this.userList = res.data;
        });
    },
    getUserGroupList() {
      getUserGroupList({ pageIndex: 1, pageSize: 1000 })
        .then((res) => {
          this.userGroupList = res.data.dataList;
        });
    },
    // 获取用户组
    subscribeTypeChange(v) {
      this.formData.subscriberArray = [];
      this.formData.subscriberNameArray = [];
      this.formData.subscriber = "";
      this.formData.subscriberName = "";
    },
    cancel() {
      this.$emit("update:dialogFormVisible", false);
      this.$emit("getList");
    },
    closeDialog() {
      this.$emit("update:dialogFormVisible", false);
      this.$emit("getList");
    },
    get() {
      get({ id: this.id })
        .then((res) => {
          var data = JSON.parse(JSON.stringify(res.data));
          this.formData.id = data.id;
          this.formData.messageType = data.messageType;
          this.formData.messageTypeName = data.messageTypeName;
          this.formData.subscribeType = data.subscribeType;
          this.formData.subscriber = data.subscriber;
          this.formData.subscriberName = data.subscriberName;
          this.formData.status = data.status;
          this.formData.messageTypeCode = data.messageTypeCode;
          this.formData.subscriberArray = this.formData.subscriber.split(",");
        })
        .catch((res) => {});
    },
    onSubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.errorMsg = this.Helper.deepCopy(this.initErrorMsg);

          this.formData.messageTypeName = this.Helper.EachArrayFindItem(
            this.messageBusinessTypeList,
            "id",
            this.formData.messageType
          ).name;
          this.formData.messageTypeCode = this.Helper.EachArrayFindItem(
            this.messageBusinessTypeList,
            "id",
            this.formData.messageType
          ).dictCode;
          if (this.formData.subscribeType === 10) {
            this.formData.subscriber = "10";
            this.formData.subscriberName = "全部";
          }
          if (this.formData.subscribeType === 20) {
            this.formData.subscriber = this.formData.subscriberArray.join(",");
            this.formData.subscriberNameArray = this.userList
              .filter((item) => {
                return this.formData.subscriberArray.includes(item.id);
              })
              .map((item) => item.name);
            this.formData.subscriberName =
              this.formData.subscriberNameArray.join(",");
          }

          if (this.formData.subscribeType === 30) {
            this.formData.subscriber = this.formData.subscriberArray.join(",");
            this.formData.subscriberNameArray = this.userGroupList
              .filter((item) => {
                return this.formData.subscriberArray.includes(item.id);
              })
              .map((item) => item.name);
            this.formData.subscriberName =
              this.formData.subscriberNameArray.join(",");
          }

          update(this.formData)
            .then((res) => {
              if (res.code === 200) {
                this.closeDialog();
              } else {
                this.showValidateMsgCheck(res);
              }
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    showValidateMsgCheck(res) {
      if (res.msg) {
        this.Helper.showValidateMsg("messageTypeName", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("subscribeType", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("subscriber", this.errorMsg, res.msg);
      }
    },
  },
};
</script>
